<template>
  <div>
    <button @click="exportFile(1)">导出excel</button>
    <div>普通表格2222222222</div>
    <table id="tableToExcel1">
      <tr>
        <th>1111</th>
        <th>1111</th>
        <th>1111</th>
        <th>1111</th>
        <th>1111</th>
        <th>1111</th>
      </tr>
      <tr>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>

      </tr>
    </table>
    <div>element表格<button @click="exportFile(2)">导出excel</button></div>
    <div>
      <template>
        <el-table
          id="tableToExcel2"
          :data="tableData"
          style="width: 800px;"
          height="250">
          <el-table-column
            fixed
            prop="date"
            label="日期"
            width="150">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="province"
            label="省份"
            width="120">
          </el-table-column>
          <el-table-column
            prop="city"
            label="市区"
            width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="300">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="邮编"
            width="120">
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  import xlsxStyle from 'xlsx-style'
  import XSU from './../../assets/js/xlsxStyle.utils'
  export default {
    name: "index",
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    },
    methods: {
      exportFile(id) {
        console.log('id',id)
        let name = this.$route.meta.name;
        let fix = document.querySelector('.el-table__fixed');
        let wb
        // let wb = XLSX.utils.table_to_book(document.querySelector('#tableToExcel'+id), {raw: true});
        if (fix&&id==2) {
          document.querySelector('#tableToExcel'+id).children[0].removeChild(fix);
          wb = XLSX.utils.table_to_book(document.querySelector('#tableToExcel'+id), {raw: true});
          document.querySelector('#tableToExcel'+id).children[0].appendChild(fix);
        } else {
          wb = XLSX.utils.table_to_book(document.querySelector('#tableToExcel'+id), {raw: true});
        }
        let sheetName = wb.SheetNames[0];
        for(let key in wb.Sheets.Sheet1){
          if(Object.prototype.toString.call(wb.Sheets.Sheet1[key]) === '[object Object]'){
            XSU.setAlignmentVertical(wb, sheetName, key, 'center'); // 垂直居中
            XSU.setAlignmentHorizontal(wb, sheetName, key, 'center'); // 水平居中
            XSU.setAlignmentWrapText(wb, sheetName, key, true); // 自动换行
            XSU.setBorderDefault(wb, sheetName, key);
            console.log(wb)
          }
        }
        // 合并单元格增加边框
        XSU.addMergeBoder(wb);
        let wbout = xlsxStyle.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
        try {
          FileSaver.saveAs(new Blob([XSU.s2ab(wbout)], { type: 'application/octet-stream' }), name + '_' + this.dateTime + '.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        this.isOnclick = false;
        return wbout

      }
    },
    mounted() {
      console.log('XSU',XSU)
    }
  }
</script>

<style scoped>

</style>
